{% extends "../main.html" %}
{% block head_js %}
<script src="{{ static_url('echarts/2-2-7/build/dist/echarts.js')}}"></script>
{% end %}

{% block bodyy %}
<div id="ll" style="height:400px;"></div>
    <h2 class="sub-header"></h2>

  <script type="text/javascript">
        require.config({
            paths: {
                echarts: "/static/echarts/2-2-7/build/dist"
            }
        });
        require(
            [
                'echarts',
                'echarts/chart/line'

            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('ll'));
                option = {
    title : {
        text: '网卡流量图',
        subtext: ''
    },
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        data:['流出','流入']
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    //添加X下拉工具条方式1
                dataZoom : {
                    show : true,
                    realtime : true,
                    start : 60,
                    end : 100
                },
    xAxis : [
        {
            type : 'category',
            boundaryGap : false,
            data : ['周一','周二','周三','周四','周五','周六','周日']
        }
    ],
    //yAxis : [
    //    {
    //        name: '内存容量（M）',
    //        type : 'value',
    //    }
    //],
    yAxis : [
        {
            type : 'value',
            axisLabel : {
                //formatter: '{value} °C'
                formatter: '{value} G'
            }
        }
    ],
    series : [
        {
            name:'流出',
            type:'line',
            smooth:true,
            itemStyle: {normal: {areaStyle: {type: 'default'}}},
            data:[30, 182, 434, 791, 390, 30, 10]
        },
        {
            name:'流入',
            type:'line',
            smooth:true,
            itemStyle: {normal: {areaStyle: {type: 'default'}}},
            data:[1320, 1132, 601, 234, 120, 90, 20]
        }
    ]
};




                // 为echarts对象加载数据
                myChart.setOption(option);
            }
        );
   </script>
{% end %}
